<template>
  <div >
    <el-card class="card">
      <el-descriptions title="我的授课" direction="vertical" :column="4" size="large" :span="2" border></el-descriptions>


      <el-table class="courses-table" :data="coursesList" border>
        <el-table-column prop="courseName" label="课程名" />
        <el-table-column prop="grade" label="年级" />
        <el-table-column prop="startWeek" label="开始周" />
        <el-table-column prop="endWeek" label="结束周" />
        <el-table-column prop="status" label="授课状态" >
          <template #default="{ row }">
            <span v-if="row.status == 0">未结课</span>
            <span v-else="row.status == 1">已结课</span>
          </template>
        </el-table-column>
        <el-table-column prop="control" label="操作" >

          <template #default="scope">
            <el-button @click="getStudentsInfo1(scope.row.id)">查看学生名单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="stus-detail" v-show="showStusList">
      <el-descriptions title="学生名单" direction="vertical" :column="4" size="large" :span="2" border></el-descriptions>
      <el-scrollbar style="width: 100%">

      <el-table class="courses-table" :data="studentsList" border>

          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="username" label="学号" />
          <el-table-column prop="grade" label="年级" />
      </el-table>
        <!-- 分页搜索 -->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 7, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next"
            background
            :total="pageTotal"
            @size-change="pageChange"
            @current-change="currentChange"
            style="margin-top: 20px; justify-content: flex-end; margin-right: 28%"
        />
      </el-scrollbar>




      <el-button class="close" type="primary" style="margin-left: 47%;margin-top: 10px" @click="closeStusList">关闭</el-button>
    </el-card>
  </div>

</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import {findStuNameList, getAllCourses, pageStuQuery} from "@/api/teacher";
import {useTeacherStoreHook} from "@/store/modules/teacher";
import {Course} from "@/api/student/type";
import {ChooseCourseItem, CourseItem, pageQuery, pageQueryItem, StudentItem} from "@/api/teacher/type";
import {reqLoginForm} from "@/api/user/type";
import { GET_TEACHER } from "@/utils/teacherInfo";


const router = useRouter()
const useStore = useTeacherStoreHook()
const coursesList = ref<CourseItem[]>()
const studentsList = ref<StudentItem>()
const list = ref(0)
const currentPage = ref(1);
const pageSize = ref(5);
//总共页数
const pageTotal = ref(0);
const courseId = ref(0)

const getStudentsInfo1=async (id)=>{
  courseId.value=id;
  getStudentsInfo();
}

//页数改变时
const pageChange = async (size) => {
  pageSize.value = size;
  await getStudentsInfo();
};

//页数大小改变时
const currentChange = async (num) => {
  currentPage.value = num;
  await getStudentsInfo();
};

//分页获取学生信息
const getStudentsInfo = async () => {
  showStusList.value = true
  let params = {
    page: currentPage.value,
    pageSize: pageSize.value,
    courseId:courseId.value

  };
  console.log(22222)

  const { data } = await pageStuQuery(params);
  studentsList.value = data.data;
  pageTotal.value = data.total;
};


onMounted(async()=>{
  await getAllTeacherCourses()

})

//教师查看所授课程
const getAllTeacherCourses = async () => {
  try {

    const { data } =await getAllCourses(GET_TEACHER().id)
    coursesList.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}

//显示学生名单
const showStusList = ref(false)
const closeStusList =async () => {
  showStusList.value = false
}
//教师查看该课程下的学生名单
const checkStusList = async (courseId: number) => {
  showStusList.value = true

  try {
    const { data } = await findStuNameList(courseId)
    studentsList.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}

</script>

<style scoped>
.card {
  margin: 1% auto 0;
  width: 90%;
  opacity: 0.9;
}
.courses-table {
  width: 90%;
  margin-top: 20px;
  margin-left: 5%;
}
.stus-detail {
  margin: auto 0;
  width: 75%;
  opacity: 0.9;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

</style>
